Header.render - Code Metrics - ualibraries/ual-payments - Measure and Improve Code Quality continuously with Scrutinizer

Header.render A
last analyzed 2020-12-08 11:18 UTC

↳ Parent: Header

Complexity

Conditions

Size

Total Lines	22
Code Lines	18

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
eloc	18
c	0
b	0
f	0
dl	0
loc	22
rs	9.5

import React from 'react'
import ReactSVG from 'react-svg'
import HelpControl from './HelpControl'
import AccountControl from './AccountControl'
import branding from '../images/branding.svg'

class Header extends React.Component {
  state = {
    helpControlActive: false
  }

  /**
   * Handle a click event on the help control.
   */
  helpControlHandler = () => {
    this.setState({
      helpControlActive: !this.state.helpControlActive,
      settingsControlActive: false
    })
  }

  /**
   * Handler closes help and settings control.
   */
  globalExitHandler = event => {
    let resetState = () => {
      this.setState({
        helpControlActive: false
      })
    }

    !document.getElementById('header__uicontrols').contains(event.target)
      ? resetState()
      : null
  }

  /**
   * Bind the global exit handler after the component mounts.
   */
  componentDidMount() {
    document.body.addEventListener('click', this.globalExitHandler)
  }

  /**
   * Render component.
   */
  render() {
    return (
      <div className="Header">
        <div className="header__inner">
          <a href="https://new.library.arizona.edu" className="logo">
            <ReactSVG path={branding} />
          </a>
          <div className="header__uicontrols-outer">
            <div className="header__uicontrols" id="header__uicontrols">
              <AccountControl />
              <HelpControl
                handler={this.helpControlHandler}
                open={this.state.helpControlActive}
              />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Header


1			import React from 'react'
2			import ReactSVG from 'react-svg'
3			import HelpControl from './HelpControl'
4			import AccountControl from './AccountControl'
5			import branding from '../images/branding.svg'
6
7			class Header extends React.Component {
8			state = {
9			helpControlActive: false
10			}
11
12			/**
13			* Handle a click event on the help control.
14			*/
15			helpControlHandler = () => {
16			this.setState({
17			helpControlActive: !this.state.helpControlActive,
18			settingsControlActive: false
19			})
20			}
21
22			/**
23			* Handler closes help and settings control.
24			*/
25			globalExitHandler = event => {
26			let resetState = () => {
27			this.setState({
28			helpControlActive: false
29			})
30			}
31
32			!document.getElementById('header__uicontrols').contains(event.target)
33			? resetState()
34			: null
35			}
36
37			/**
38			* Bind the global exit handler after the component mounts.
39			*/
40			componentDidMount() {
41			document.body.addEventListener('click', this.globalExitHandler)
42			}
43
44			/**
45			* Render component.
46			*/
47			render() {
48			return (
49			<div className="Header">
50			<div className="header__inner">
51			<a href="https://new.library.arizona.edu" className="logo">
52			<ReactSVG path={branding} />
53			</a>
54			<div className="header__uicontrols-outer">
55			<div className="header__uicontrols" id="header__uicontrols">
56			<AccountControl />
57			<HelpControl
58			handler={this.helpControlHandler}
59			open={this.state.helpControlActive}
60			/>
61			</div>
62			</div>
63			</div>
64			</div>
65			)
66			}
67			}
68
69			export default Header
70

ualibraries / ual-payments

Header.render A last analyzed 2020-12-08 11:18 UTC

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like

Header.render A
last analyzed 2020-12-08 11:18 UTC